<template>
  <div class="main">
    <el-card class="box-card">
      <div class="top">
        <div>策略搜索：</div>
        <el-input v-model="search" class="input" size="medium" placeholder="请输入" />
        <el-button type="primary" size="small">
          <i class="el-icon-search" />
          查询
        </el-button>
      </div>

    </el-card>
    <el-card class="table">
      <el-button type="warning" class="add" @click="openEditDialog('add')"> <i class="el-icon-circle-plus-outline" />新建</el-button>
      <el-table
        :data="tableData"
        style="width: 100%"
        :header-cell-style="{ backgroundColor: '#f3f6fb', fontweight: 400 }"
      >
        <el-table-column
          prop="date"
          label="序号"
          width="120"
          type="index"
        />
        <el-table-column
          prop="policyName"
          label="策略名称"
          width="300"
        />
        <el-table-column
          prop="discount"
          label="策略方案"
          width="300"
        />
        <el-table-column
          prop="createTime"
          label="创建日期"
          width="300"
        />
        <el-table-column
          prop="address"
          label="操作"
          width="200"
        >
          <template #default="{row}">
            <el-button type="text" @click="openDetail(row)">查看详情</el-button>
            <el-button type="text" @click="openEditDialog('edit',row)">修改</el-button>
            <el-button type="text" class="delete" @click="tips(row.policyId)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <PageTool :info="queryPage" @handleCurrentChange="handleCurrentChange" />
    </el-card>
    <!-- ------------------------分页-----------------TODO---------------------------------- -->
    <!-- -----------------添加或修改弹窗----------------- -->
    <el-dialog
      :title="cardTitle"
      :visible.sync="EditDialogFlag"
      width="42%"
    >
      <div class="formDia">
        <el-form ref="form" :model="form" :rules="rules" label-width="140px">

          <el-form-item label="策略名称 :" prop="policyName">
            <el-input
              v-model="form.policyName"
              maxlength="15"
              show-word-limit
              placeholder="请输入"
              class="diaInput"
            />
          </el-form-item>
          <el-form-item label="策略方案 :" prop="discount">
            <el-input-number v-model="form.discount" controls-position="right" :min="1" :max="100" class="inpNumber" />
          </el-form-item>

          <el-form-item>
            <el-button type="warning" plain>取消</el-button>
            <el-button type="warning" @click="addOrEdit">确认</el-button>
          </el-form-item>
        </el-form>
      </div>

    </el-dialog>
    <!-- ----------------------------详情弹窗------------------------ -->
    <el-dialog
      title="区域详情"
      :visible.sync="detailDIA"
      width="45%"
    >
      <el-form :model="form" :rules="rules" label-width="140px">
        <el-form-item label="策略名称 :">
          <span>{{ policyName }}</span>
        </el-form-item>
        <el-form-item label="策略方案 :">
          <el-table
            :data="detailTabe"
          >
            <el-table-column
              label="序号"
              width="100"
              type="index"
            />
            <el-table-column
              prop="nodeName"
              label="点位名称"
              width="200"
            />
            <el-table-column
              prop="innerCode"
              label="设备编号"
            />
          </el-table>
          <!-- ------------------------------分页TODO-------------------------- -->
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { getStrategy, addStrategy, updateStrategy, detailStrategy, deleteStrategy } from '@/api/strategy'
import PageTool from '@/views/equipment/components/page-tool.vue'
export default {
  name: '',
  components: {
    PageTool
  },
  props: {
  },
  data() {
    return {
      detailDIA: false,
      EditDialogFlag: false,
      search: '',
      tableData: [],
      detailTabe: [],
      form: {
        policyName: '',
        discount: ''
      },
      rules: {
        policyName: [
          { required: true, message: '请输入区域名称', trigger: 'blur' },
          { min: 3, max: 15, message: '长度在 3 到 15 个字符', trigger: 'blur' }
        ]
      },
      type: 'add',
      num: 1,
      queryPage: {
        pageIndex: 1,
        pageSize: 10,
        totalCount: 0,
        totalPage: 0
      },
      editId: 0,
      policyName: ''
    }
  },
  computed: {
    cardTitle() {
      if (this.type === 'add') {
        return '新增策略'
      } else {
        return '修改策略'
      }
    } },
  created() {
    this.strategyList()
  },
  methods: {
    // 分页
    handleCurrentChange(val) {
      this.queryPage.pageIndex = val
      this.strategyList()
    },
    // 提交添加或修改
    async addOrEdit() {
      if (this.type === 'add') {
        console.log(555)
        console.log(this.form)
        await addStrategy(this.form)
        this.$message.success('添加成功')
        this.strategyList()
      } else {
        console.log(this.form)
        console.log(this.editId)
        await updateStrategy(this.editId, this.form)
        this.$message.success('修改成功')
        this.strategyList()
      }
      this.EditDialogFlag = false
    },
    // 获取合作商列表
    async strategyList() {
      const { totalCount, totalPage } = await getStrategy(this.queryPage)
      this.queryPage.totalCount = totalCount
      this.queryPage.totalPage = totalPage
      const data = await getStrategy(this.queryPage)
      this.tableData = data.currentPageRecords
      console.log(data)
      console.log(this.tableData)
    },
    // 打开详情弹窗
    async openDetail(row) {
      this.policyName = row.policyName
      this.detailDIA = true
      const { currentPageRecords } = await detailStrategy(row.policyId, this.queryPage)
      console.log(currentPageRecords)
      this.detailTabe = currentPageRecords
    },
    // 打开添加或修改弹窗
    openEditDialog(type, row) {
      this.EditDialogFlag = true
      this.type = type

      if (this.type !== 'add') {
        this.form.policyName = row.policyName
        this.form.discount = row.discount
        this.editId = row.policyId
      }
    },
    // 删除提示
    async tips(id) {
      await deleteStrategy(id)
      this.$message.success('删除成功')
      this.strategyList()
    }
  }

}
</script>

<style scoped lang='scss'>
.delete{
  color: red;
}
.el-icon-circle-plus-outline{
  margin-right: 7px;
}
.main{
  margin-top: 70px;
  padding: 0 20px;
}
.formDia{
  padding-right: 60px;
.inpNumber{
  width: 405px;
}}
  .top{
display: flex;
justify-content: flex-start;
align-items: center;
  .input{
  width: 200px;
  margin-right: 15px;
}
  }
  .table{
    width: 100%;
    margin-top: 20px;
  }
.add{
  margin-bottom: 25px;
}
</style>
